<template>
  <div>
    <div class="collection_top">
      <div class="iconfont icon-fanhui return" @click="prev"></div>
      <div class="vetable">菜谱分类</div>
      <div class="iconfont icon-sousuo sousuo" @click="go"></div>
    </div>

    <div class="collection_text">
      <div class="text">
        <div class="left_text">
          <ul>
            <li v-for="(item, index) in collections" :key="index" :class="[index == num?'con':'']"  @click="liscon(index)" >
              {{ item.name }}
            </li>
          </ul>
        </div>

        <div class="right_text">
            <ul>
                <li class="twoli" v-for="item in menu[num]" :key="item.id">
                    <div class="two_title">{{item.name}}</div>
                    <div class="threeli" v-for="value in item.cs" :key="value.id"  @click="push(value.name)">{{value.name}}</div>
                </li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecipeFlatcatalogs } from "../../api/collection";
export default {
  data() {
    return {
      collections: [],
      menu: [],
      num:0
    };
  },
  methods:{
      liscon(index){
          this.num = index;
      },
        prev(){
        this.$router.go(-1)
      },
      go(){
          this.$router.push({path:'/search'})
      },
      push(name){
       this.$router.push({path:'/result',query: {name:name}})
      }
  },
  created() {
    getRecipeFlatcatalogs().then((data) => {
      this.collections = data.result.cs;
      this.collections.forEach((item)=>{
          this.menu.push(item.cs)
      })
      console.log(this.menu);
    });
  },
};
</script>

<style lang="less">
.collection_top {
  margin-top: 44px;
  display: flex;
  align-items: center;
  .return {
    margin-left: 22px;
    font-size: 18px;
    line-height: 18px;
  }
  .vetable {
    margin-left: 40px;
    font-size: 18px;
    line-height: 18px;
    color: #222222;
  }
  .sousuo {
    margin-left: 53%;
    color: #000000;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
  }
}

.collection_text {
  margin-top: 16px;
  border-top: 1px solid #efeeec;
  .text {
    display: flex;
    .left_text {
      width: 23%;
      ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        li {
          display: block;
          background-color: #fafafa;
          font-size: 14px;
          line-height: 48px;
          width: 100%;
          position: relative;
        }
        li.con{
              background-color: #ffffff;
        }
          li.con::after {
            content: "";
            display: block;
            border-radius: 3px;
            width: 5px;
            height: 20px;
            background-color: #FFC42D;
            position: absolute;
            right: 0px;
            top: 14px;
          }
      }
    }
    .right_text{
        margin: 10px 18px;
        width: 77%;
        ul{
            .twoli{
                width: 100%;
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                .two_title{
                    width: 100%;
                    height: 56px;
                    background-color: #FFFBE7;
                    font-size: 14px;
                    line-height: 56px;
                    color: #8A8358;
                    border-radius: 5px;
                    margin-bottom: 10px;
                }
                .threeli{
                    font-size: 14px;
                    line-height: 35px;
                    padding: 0 12px;
                    border: 1px solid #F5F5F5;
                    color: #070707;
                    margin-bottom: 10px;
                    margin-right:10px ;
                }
            }
        }
    }
  }
}
</style>